<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="/static/css/hui.css">

    <style>
        .userInfo {
            height: 90px;
            border-bottom: 1px solid #000;
            text-align: center;
            padding-bottom: 10px;
            width: 100%;
            position: fixed;
            top: 0;
            background-color: #f8f8ff;
            /* z-index: 9999; */
        }

        .userImg {
            width: 80px;
            width: 80px;
            border-radius: 50%;
        }

        .userImgLink {
            display: inline-block;
            text-decoration: none;
        }

        .nickname {
            border: 0;
            margin: -6px 0 0 0;
            padding: 0;

        }
    </style>
</head>

<body>

    <div class="hui-wrap">
        <div class="userInfo">
            {% if nickname %}
            <a href="/userInfo/" class="userImgLink">
                <img src="{{user_image}}" alt="" class="userImg">
                <p class="nickname">{{nickname}}</p>
            </a>
            {% else %}
            <a href="/login/" class="userImgLink" title="请先登录">
                <img src="/static/uploads/user_default.png" alt="" class="userImg">
            </a>
            {% endif %}
        </div>
        <!--  -->
        <div id="refreshContainer" class="hui-refresh" style="margin-top: 100px">
            <div class="hui-refresh-icon" style="margin-top: -60px;">
                <span class="hui-icons hui-icons-down"></span>继续下拉刷新
            </div>
            <div class="hui-refresh-content hui-list">
                <div id="list">
                    {% for book in books %}
                    <div class="hui-swipe-do">
                        <div class="hui-swipe-do-doms hui-list-text" style="width: 555px;">

                            <div class="hui-swipe-do-content" style="width: 415px;">
                                <div style="line-height:30px; padding:10px 8px;">
                                    <span class="bookName">{{book.bookName}}</span>
                                    <h2 class="bookID" style="display: none">{{book.bookID}}</h2>
                                </div>
                            </div>
                            <div class="hui-swipe-do-btn hui-swipe-do-btn-gray" onclick="bookDetails(this);" style="height: 50px; line-height: 50px;">详情</div>
                            {% if nickname %}
                            <div class="hui-swipe-do-btn" onclick="borrow(this);" style="height: 50px; line-height: 50px;">借阅</div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>



    <div id="hui-load-more">
        <div class="hui-loading-wrap">
            <div class="hui-loading" style="margin:8px 5px 0px 0px;"></div>
            <div class="hui-loading-text">加载中</div>
        </div>
    </div>

    <script type="text/javascript" src="/static/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/static/js/hui.js"></script>
    <script src="/static/js/hui-refresh-load-more.js"></script>

    <script>
        //书本详情
        function bookDetails(cdom) {
            var bookId = $(cdom).siblings().find('h2').text();
            hui.open('http://127.0.0.1:5000/bookDetails/' + bookId);

        }
        //借阅图书
        function borrow(cdom) {
            var bookName = $(cdom).siblings().find('span').text();
            var bookId = $(cdom).siblings().find('h2').text();
            hui.postJSON(
                'http://127.0.0.1:5000/borrow/',
                { bookId: bookId, bookName: bookName },
                function (res) {
                    console.log(res)
                    if (res.code == 1)
                        hui.iconToast(res.message, 'success');
                    else
                        hui.alert(res.message, '好的')
                },
                function (e) {
                    hui.iconToast('读取消息失败', 'warn');
                }
            );
        }



        //初始化
        hui.swipeDo();


        //
        var page = 1;
        hui.refresh('#refreshContainer', refresh);
        hui.loadMore(getMore);
        //加载更多
        function getMore() {
            hui.getJSON(
                'http://127.0.0.1:5000/bookList/' + page,
                function (res) {
                    var books = res.books

                    //判断加载完毕
                    if (books.length == 0) {
                        hui.endLoadMore(true, '没有数据了');
                        return false;
                    }
                    var html = '';
                    for (var i = 0; i < books.length; i++) {


                        html += `
                            <div class="hui-swipe-do">
                                <div class="hui-swipe-do-doms hui-list-text" style="width: 555px;">

                                    <div class="hui-swipe-do-content" style="width: 415px;">
                                        <div style="line-height:30px; padding:10px 8px;">
                                            <span class="bookName">`+ books[i].bookName + `</span>
                                            <h2 style="display: none">` + books[i].bookID + `</h2>
                                        </div>
                                    </div>
                                    <div class="hui-swipe-do-btn hui-swipe-do-btn-gray" onclick="bookDetails(this);" style="height: 50px; line-height: 50px;">详情</div>
                                    {% if nickname %}
                                    <div class="hui-swipe-do-btn" onclick="borrow(this);" style="height: 50px; line-height: 50px;">借阅</div>
                                    {% endif %}
                                </div>
                            </div>
                            `
                    }
                    $("#list").append(html);
                    // console.log(html)

                    page++;
                    // console.log(page)

                    hui.endLoadMore();
                }
            );
        }

        //下拉刷新
        function refresh() {
            if (hui.refreshNumber == 0) {
                hui.closeLoading();
                hui.endRefresh();
            } else {
                hui.loading('加载中...');
                hui.getJSON(
                    'http://127.0.0.1:5000/bookList/0',
                    function (res) {
                        hui.closeLoading();

                        var books = res.books
                        var html = '';
                        for (var i = 0; i < books.length; i++) {

                            html += `
                            <div class="hui-swipe-do">
                                <div class="hui-swipe-do-doms hui-list-text" style="width: 555px;">

                                    <div class="hui-swipe-do-content" style="width: 415px;">
                                        <div style="line-height:30px; padding:10px 8px;">
                                            <span class="bookName">`+ books[i].bookName + `</span>
                                            <h2 style="display: none">` + books[i].bookID + `</h2>
                                        </div>
                                    </div>
                                    <div class="hui-swipe-do-btn hui-swipe-do-btn-gray" onclick="bookDetails(this);" style="height: 50px; line-height: 50px;">详情</div>
                                    {% if nickname %}
                                    <div class="hui-swipe-do-btn" onclick="borrow(this);" style="height: 50px; line-height: 50px;">借阅</div>
                                    {% endif %}
                                </div>
                            </div>
                            `
                        }

                        hui('#list').html(html);
                        //结束刷新
                        hui.endRefresh();
                        //重置加载更多状态
                        hui.resetLoadMore();
                    },
                    function () {
                        hui.closeLoading();
                        hui.upToast('连接服务器失败！');
                        hui.endRefresh();
                    }
                );
            }

        }

    </script>

</body>

</html>